<template>
    <div class="person">

        <h2>当前求和为{{ sum }}</h2>
        <button @click="incrementSum">点我+1</button>
        <button @click="decrementSum">点我减一</button>
        <hr>
        <!-- 
            遍历我们的doglist
                让我们显示获取的每一张图片......
                src就是dog,网站给我们传来的get的内容.标签ID则是我们数组的缩影
         -->
        <img v-for="(dog, index) in doglist" :src="dog" alt="" :key="index">
        <button @click="getDog"> 再来一只狗</button>
    </div>
</template>

<script lang="ts" setup name='Person'>
import useSum from '@/hooks/useSum';
import useDog from '@/hooks/useDog';
/* 
    引用并且将其函数内部返回的数值/函数取出来
    
*/
let { sum, incrementSum, decrementSum } = useSum()
let { doglist, getDog } = useDog()
</script>
<style scoped>
/*  组件的样式 */
.person {
    /* 设置颜色,设置阴影,
            设置元素的外边框圆角,使用一个半径可以确定一个圆形,当使用两个半径时确定一个椭圆。这个（椭）圆与边框的交集形成圆角效果。
            设置内边距
            */
    background-color: aqua;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 5px;
}

img {
    height: 100px;
    margin: 10px;
}
</style>
